<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>响应式导航</title>

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css" type="text/css">

    <style>
        #headerImg {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            padding: 5px;
        }

        #lunbo img {
            width: 100%;
        }
    </style>
</head>

<body>
    <!--响应式导航 - begin-->
    <div class="container-fluid">
        <div class="row">
            <nav class="navbar navbar-inverse" role="navigation">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#example-navbar-collapse">
                            <span class="sr-only">切换导航</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">个人博客</a>
                    </div>
                    <div class="collapse navbar-collapse" id="example-navbar-collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li class="active"><a href="#">首页</a></li>
                            <li><a href="#" data-toggle="modal" data-target="#myModal">登录</a></li>
                            <li><a href="#">安全退出</a></li>
                            <li><a href="#">注册</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    Java <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">jmeter</a></li>
                                    <li><a href="#">EJB</a></li>
                                    <li><a href="#">Jasper Report</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">分离的链接</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">另一个分离的链接</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    个人中心 <b class="caret"></b>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">设置密码</a></li>
                                    <li><a href="#">EJB</a></li>
                                    <li><a href="#">Jasper Report</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">分离的链接</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">另一个分离的链接</a></li>
                                </ul>
                            </li>
                            <li><img id="headerImg" src="imgs/zly.jpg"></li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <!--响应式导航end-->

    <!--轮播 - banner - begin-->
    <div class="container-fluid" id="lunbo">
        <div class="row">
            <div id="myCarousel" class="carousel slide">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="imgs/advert1.jpg" alt="First slide">
                    </div>
                    <div class="item">
                        <img src="imgs/advert1.jpg" alt="Second slide">
                    </div>
                    <div class="item">
                        <img src="imgs/advert1.jpg" alt="Third slide">
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="carousel-control left" href="#myCarousel" data-slide="prev"> <span _ngcontent-c3=""
                        aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span></a>
                <a class="carousel-control right" href="#myCarousel" data-slide="next"><span _ngcontent-c3=""
                    aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
        </div>
    </div>

    <!--轮播 - banner - end - swiper https://www.swiper.com.cn/ -->

    <!--面包屑 begin-->
    <div class="container-fluid" style="margin-top:20px">
        <div class="row">
            <ul class="breadcrumb">
                <li><a href="#">个人博客</a></li>
                <li><a href="#">2013</a></li>
                <li class="active">十一月</li>
            </ul>
        </div>
    </div>
    <!--面包屑 end-->

    <!--缩略图begin-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="imgs/dongjian.jpg" alt="通用的占位符缩略图">
                    <div class="caption" style="overflow:hidden">
                        <h3 align="center" class="text-success">洞见</h3>
                        <p style="text-align:center">这是一本难得的好书</p>
                        <p style="float:left">
                            <!-- 字体图标 -->
                            <a href="#" class="text-danger"><span class="glyphicon glyphicon-trash"></span></a>
                        </p>
                        <p style="float:right">
                            <a href="#" class="text-warning"><span class="glyphicon glyphicon-edit"></span></a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="imgs/feizhouguilai.jpg" alt="通用的占位符缩略图">
                    <div class="caption" style="overflow:hidden">
                        <h3 align="center" class="text-success">洞见</h3>
                        <p style="text-align:center">这是一本难得的好书</p>
                        <p style="float:left">
                            <!-- 字体图标 -->
                            <a href="#" class="text-danger"><span class="glyphicon glyphicon-trash"></span></a>
                        </p>
                        <p style="float:right">
                            <a href="#" class="text-warning"><span class="glyphicon glyphicon-edit"></span></a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="imgs/meilianchuzhuxi.jpg" alt="通用的占位符缩略图">
                    <div class="caption" style="overflow:hidden">
                        <h3 align="center" class="text-success">洞见</h3>
                        <p style="text-align:center">这是一本难得的好书</p>
                        <p style="float:left">
                            <!-- 字体图标 -->
                            <a href="#" class="text-danger"><span class="glyphicon glyphicon-trash"></span></a>
                        </p>
                        <p style="float:right">
                            <a href="#" class="text-warning"><span class="glyphicon glyphicon-edit"></span></a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="imgs/tenxunchuan.jpg" alt="通用的占位符缩略图">
                    <div class="caption" style="overflow:hidden">
                        <h3 align="center" class="text-success">洞见</h3>
                        <p style="text-align:center">这是一本难得的好书</p>
                        <p style="float:left">
                            <!-- 字体图标 -->
                            <a href="#" class="text-danger"><span class="glyphicon glyphicon-trash"></span></a>
                        </p>
                        <p style="float:right">
                            <a href="#" class="text-warning"><span class="glyphicon glyphicon-edit"></span></a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="imgs/tenxunchuan.jpg" alt="通用的占位符缩略图">
                    <div class="caption" style="overflow:hidden">
                        <h3 align="center" class="text-success">洞见</h3>
                        <p style="text-align:center">这是一本难得的好书</p>
                        <p style="float:left">
                            <!-- 字体图标 -->
                            <a href="#" class="text-danger"><span class="glyphicon glyphicon-trash"></span></a>
                        </p>
                        <p style="float:right">
                            <a href="#" class="text-warning"><span class="glyphicon glyphicon-edit"></span></a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 缩略图end -->

    <!--分页的样式 begin-->
    <div class="container">
        <div class="row" style="text-align:center">
            <ul class="pagination">
                <li><a href="#">&laquo;</a></li>
                <li class="active"><a href="#">1</a></li>
                <li class="disabled"><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li><a href="#">&raquo;</a></li>
            </ul>
        </div>
    </div>
    <!--分页的样式end-->

    <!--模态框begin-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">用户登录入口</h4>
                </div>
                <div class="modal-body">
                    <!--表单登录-->
                    <form class="form-horizontal" role="form">
                        <div class="form-group has-feedback">
                            <label for="firstname" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
                                <span class="form-control-feedback glyphicon glyphicon-user"></span>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <label for="lastname" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="lastname" placeholder="请输入姓">
                                <span class="form-control-feedback glyphicon glyphicon-lock"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox">请记住我
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-default">登录</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!--模态框end-->

    <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
    <script src="plugins/jquery/jquery.min.js"></script>
    <!--引入bootstrap的js文件-->
    <script src="plugins/bootstrap/js/bootstrap.js"></script>

    <script>
        // 让banner - 每过2秒轮播
        $('#myCarousel').carousel({
            interval: 2000
        })
    </script>
</body>

</html>